<template>
  <div id="information">
    <div class="user-head fl circle">
      <img id="avater" :src="user.avater" style="width:100%;height:100%" @click="changeAvater" alt />
    </div>
    <el-form ref="user" :model="user" label-width="80px" :inline-message="true" class="fl ml42">
      <el-form-item label="姓名">
        <el-input v-model="user.name" :disabled="edit" style="width:250%"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="user.gender" :disabled="edit" style="width:150%" placeholder="请选择">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
          v-model="user.birthday"
          type="date"
          :disabled="edit"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="float:left;width:180%"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="user.phone" disabled="disabled" style="width:250%"></el-input>
      </el-form-item>
      <el-form-item label="邮箱号">
        <el-input v-model="user.email" disabled="disabled" style="width:250%"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="user.address" :disabled="edit" style="width:250%"></el-input>
      </el-form-item>
      <el-form-item label="个人介绍">
        <el-input
          style="width:250%"
          :disabled="edit"
          type="textarea"
          :rows="3"
          placeholder="说点什么吧"
          v-model="user.profile"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fix">修改个人信息</el-button>
        <el-button @click="save">保存</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="上传头像" top="40vh" :visible.sync="uploadFile" :lockScroll="false">
      <template>
        <el-upload
          class="upload-demo"
          ref="upload"
          :multiple="false"
          :on-success="success"
          action="http://weim1.f3322.net:8088/api/file/upload"
          :limit="1"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="middle" type="primary">选取文件</el-button>
          <el-button
            style="margin-left: 10px;"
            size="middle"
            type="success"
            @click="submitUpload"
          >上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadFile: false,
      edit: true,
      user: {
        id: null,
        name: null,
        profile: null,
        avater:
          "http://134.175.13.62/group1/M00/00/00/rBAACl6IZXmAKy_pAACNSsSOM5k13.jpeg",
        gender: null,
        phone: null,
        email: null,
        actived: true,
        address: null,
        certificatied: true
      }
    };
  },
  created() {
    this.axios.get("/user/info").then(resp => {
      this.user = resp.data;
    });
  },
  methods: {
    save() {
      this.edit = true;
      this.axios
        .put("/user/update", this.user)
        .then(resp => {
          if (resp.code == 0) {
            this.$message.success(resp.msg);
          } else {
            this.$message.error(resp.msg);
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    fix() {
      this.edit = false;
    },
    changeAvater() {
      if (this.edit == false) {
        this.uploadFile = true;
      }
    },
    submitUpload() {
      var ret = this.$refs.upload.submit();
    },
    success(response) {
      this.user.avater = this.fileUrl + response["data"][0];
      this.uploadFile = false;
    },
  }
};
</script>

<style scoped>
#information {
  /* width: 100%; */
  min-height: 515px;
  margin-top: 36px;
  padding-left: 85px;
}
.el-tab-pane {
  float: left;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.user-head {
  width: 120px;
  height: 120px;
  cursor: pointer;
}
.el-select {
  width: 50%;
  float: left;
  display: inline-block;
  position: relative;
}
</style>
